<script lang="ts" setup>
import {Timer} from '@element-plus/icons-vue'
import {ref, onMounted} from 'vue';
import adminApi from '../api/admin.js';
import {ElMessage, ElMessageBox} from 'element-plus'
import lodash from 'lodash'
/*表格数据*/
const tableData = ref([]);
/*绑定的编辑数据*/
const editObj = ref({
  phone: '',
  name: '',
});
/*绑定的添加数据*/
const addObj = ref({
  phone: '',
  name: '',
  password: ''
});
/*绑定删除数据*/
const deleteObj = ref({});
/*分页参数*/
const pageParams = ref({
  current: 1,
  size: 10,
  total: 0,
  search: ''
});

const editDialogVisible = ref(false);
const addDialogVisible = ref(false);

onMounted(() => {
  getTableData();
})
/*获取表格数据*/
const getTableData = async () => {
  const res = await adminApi.page(pageParams.value);
  console.log(res);
  tableData.value = res.records;
  pageParams.value.total = res.total;

}

/*点击编辑按钮时，将数据保存在editObj中*/
const handleEdit = (index, row) => {
  editDialogVisible.value=true;
  editObj.value=row;
}
/*点击删除按钮时*/
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认要删除改行数据吗?',
      '删除提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    /*点击确认按钮执行代码*/
    await adminApi.delete(row.id);
    pageParams.value.current=1;
    getTableData();
  }).catch(() => {
    /*点击取消按钮执行代码*/
  })
}
/*点击添加按钮时*/
const handleAdd = () => {
  console.log('add')
}
/*点击新增提交按钮时*/
const handleAddSubmit = (index,row) => {

}
/*点击修改提交按钮时*/
const handleEditSubmit = async () => {
  await adminApi.edit(editObj.value);
  getTableData();
  editDialogVisible.value=false;
}
/*点击取消按钮时*/
const handleCancel = () => {
};
/*点击搜索按钮时*/
const handleSearch = () => {
};
/*分页大小改变时*/
const handleSizeChange = (val) => {
  pageParams.value.size = val;
  getTableData();
}
/*分页当前页改变时*/
const handleCurrentChange = (val) => {
  pageParams.value.current = val;
  getTableData();
}
</script>
<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content ep-bg-purple-dark" style="padding: 10px 20px;">
        <el-input v-model="pageParams.search" style="width: 240px;margin-right: 8px;" placeholder="请输入查询内容"/>
        <el-button type="primary" @click="handleAdd" color="#f9ed69">
          <el-icon style="margin-right: 8px;">
            <Search/>
          </el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="handleAdd">
          <el-icon style="margin-right: 8px;">
            <CirclePlus/>
          </el-icon>
          新增
        </el-button>
      </div>
    </el-col>
  </el-row>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="ID">
      <template #default="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column>
    <el-table-column label="联系电话">
      <template #default="scope">
        {{ scope.row.phone }}
      </template>
    </el-table-column>
    <el-table-column label="昵称">
      <template #default="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" color="#1fab89" @click="handleEdit(scope.$index, scope.row)">
          <el-icon style="margin-right: 8px;">
            <Edit/>
          </el-icon>
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          <el-icon style="margin-right: 8px;">
            <Delete/>
          </el-icon>
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="pageParams.current"
      v-model:page-size="pageParams.size"
      :page-sizes="[10,20,50, 100]"
      :size="pageParams.size"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
<!--编辑对话框-->
  <el-dialog v-model="editDialogVisible" title="编辑" width="500">
    <el-form :model="editObj">
      <el-form-item label="手机号" :label-width="100">
        <el-input v-model="editObj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="昵称" :label-width="100">
        <el-input v-model="editObj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--新增对话框-->
  <el-dialog v-model="addDialogVisible" title="新增" width="500">
    <el-form :model="addObj">
      <el-form-item label="手机号" :label-width="100">
        <el-input v-model="addObj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="昵称" :label-width="100">
        <el-input v-model="addObj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="100">
        <el-input type="password" v-model="addObj.password" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>


<style scoped>

</style>
